import React, {Component} from 'react';

class Table extends Component {
	static defaultProps = {
		columns: [],
		data: [],
		emptyInfo: '暂无数据~',
		keyProps: 'id'
	};

	render() {
		const {columns, data, emptyInfo, keyProps} = this.props;
		return (
			<table className="table table-striped table-bordered table-hover">
				<thead>
				<tr>
					{
						columns.map((item, index) => <th key={index}
						                                 width={item.width}
							>
								{item.title}
							</th>
						)
					}
				</tr>
				</thead>
				<tbody>
				{
					data.length === 0
						?
						<tr>
							<td className="text-center" colSpan={columns.length}>
								{emptyInfo}
							</td>
						</tr>
						:
						data.map((item, index) => {
							return (
								<tr key={item[keyProps]}>
									{
										columns.map((value, i) => {
											let content = '';
											if (value.render) {
												content = value.render(item, index);
											} else if (value.props) {
												content = item[value.props]
											}
											return <td key={i}>
												{content}
											</td>
										})
									}
								</tr>
							)
						})
				}
				</tbody>
			</table>
		);
	}
}

export default Table;